{{ template "common/head.html" .title}}
<body>
{{ template "common/header.html" .userName }}

{{ template "common/search_bar.html" .goodsSKUCount }}

{{ template "common/navbar_con.html" .goodsTypes}}

<div class="breadcrumb">
    <a href="#">全部分类</a>
    <span>></span>
    <a href="/goods-list?type-id={{ .goodsSKU.GoodsType.Id }}">{{ .goodsSKU.GoodsType.Name }}</a>
    <span>></span>
    <a href="/goods-detail?id={{ .goodsSKU.Id }}">商品详情</a>
</div>

<div class="goods_detail_con clearfix">
    <div class="goods_detail_pic fl"><img src="http://192.168.181.130:8888/{{ .goodsSKU.Image }}"></div>

    <div class="goods_detail_list fr">
        <h3>{{ .goodsSKU.Name }}</h3>
        <p>{{ .goodsSKU.Desc }}</p>
        <div class="prize_bar">
            <span class="show_pirze">¥<em>{{ .goodsSKU.Price }}</em></span>
            <span class="show_unit">单  位：{{ .goodsSKU.Unite }}</span>
        </div>
        <div class="goods_num clearfix">
            <div class="num_name fl">数 量：</div>
            <div class="num_add fl">
                <input type="text" class="num_show fl" value="1">
                <a href="javascript:;" class="add fr">+</a>
                <a href="javascript:;" class="minus fr">-</a>
            </div>
        </div>
        <div class="total">总价：<em>16.80元</em></div>
        <div class="operate_btn">
            <a href="javascript:;" class="buy_btn">立即购买</a>
            <a href="javascript:;" class="add_cart" id="add_cart" goods_sku_id="{{ .goodsSKU.Id }}">加入购物车</a>
        </div>
    </div>
</div>

<div class="main_wrap clearfix">
    <div class="l_wrap fl clearfix">
        <div class="new_goods">
            <h3>新品推荐</h3>
            <ul>
                {{ range .newGoodsSKUs }}
                    <li>
                        <a href="/goods-detail?id={{ .Id }}"><img src="http://192.168.181.130:8888/{{ .Image }}"></a>
                        <h4><a href="#">{{ .Name }}</a></h4>
                        <div class="prize">￥{{ .Price }}</div>
                    </li>
                {{ end }}
            </ul>
        </div>
    </div>

    <div class="r_wrap fr clearfix">
        <ul class="detail_tab clearfix">
            <li class="active">商品介绍</li>
            <li>评论</li>
        </ul>

        <div class="tab_content">
            <dl>
                <dt>商品详情：</dt>
                <dd>{{ .goodsSKU.Goods.Detail }}</dd>
            </dl>
        </div>

    </div>
</div>

{{ template "common/footer.html"}}
<div class="add_jump"></div>

<script type="text/javascript" src="/static/js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
    // 更新总价
    UpdateGoodsPrice()

    function UpdateGoodsPrice() {
        // 获取商品 单价 和 数量
        price = $('.show_pirze').children('em').text();
        count = $('.num_show').val();

        price = parseFloat(price)
        count = parseInt(count)

        total = price * count

        // 更新总价
        $('.total').children('em').text(total.toFixed(2) + '元')
    }

    // 增加商品数量
    $('.add').click(function () {
        count = $('.num_show').val();
        count = parseInt(count) + 1
        // 更新数量
        $('.num_show').val(count);
        // 更新总价
        UpdateGoodsPrice()
    });

    // 减少商品数量
    $('.minus').click(function () {
        count = $('.num_show').val();
        count = parseInt(count) - 1
        if (1 > count) {
            count = 1
        }
        // 更新数量
        $('.num_show').val(count);
        // 更新总价
        UpdateGoodsPrice()
    });

    // 手动输入商品数量
    $('.num_show').blur(function () {
        // 获取输入框内容
        count = $(this).val()
        // 对数据进行校验
        if (isNaN(count) || count.trim().length == 0 || 1 > parseInt(count)) {
            count = 1
        }
        // 在页面显示
        $(this).val(parseInt(count))
        // 更新总价
        UpdateGoodsPrice()
    })

    // var $add_x = $('#add_cart').offset().top;
    // var $add_y = $('#add_cart').offset().left;
    //
    // var $to_x = $('#show_count').offset().top;
    // var $to_y = $('#show_count').offset().left;

    // $(".add_jump").css({'left': $add_y + 80, 'top': $add_x + 10, 'display': 'block'})
    $('#add_cart').click(function () {
        goods_sku_id = $('#add_cart').attr('goods_sku_id')
        goods_count = $('.num_show').val()

        param = {"goods_sku_id": goods_sku_id, "goods_count": goods_count}
        $.post('/u/add-cart', param, function (data) {
            if (data.code == 0) {
                $('.goods_count').html(data.goodsSKUCount);
            } else {
                alert(data.msg);
            }
        })
    })
</script>

</body>
</html>